<template>
    <!-- 对数据进行截取 是当前页数-1 乘以 显示条数     当前页数乘以显示条数 -->
    <el-table :data="
        filterTableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)
    " style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
        <!-- 添加输入框 -->
        <el-table-column align="right" width="auto">
            <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>
        </el-table-column>
        <!-- 添加输入框 -->
    </el-table>
    <!-- 设置导航 -->
    <!-- 修改下面得属性 -->
    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="$store.state.homeview.tableData.length"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" />
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useStore } from "vuex";

const store = useStore()


const currentPage4 = ref(1)

const pageSize4 = ref(10)
//绑定输入框数据
const search = ref('')

const filterTableData = computed(() =>
store.state.homeview.tableData.filter(
        (data:any) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)

const handleSizeChange = (val: number) => {
    pageSize4.value = val;
}

const handleCurrentChange = (val: number) => {
    currentPage4.value = val;
}


</script>

<style scoped>

</style>